<template>
	<view class="horseLamp" @click="open">
		<view v-if="parameter.titleImg" class="icon">
			<image mode="heightFix" class="img" :src="parameter.titleImg" />
		</view>
		<view ref="static_view" class="static">
			<view v-if="parameter.slideType == 2" class="marquee_text one_cont" :style="{
					'animation-duration': (parameter.duration || 8) + 's',
					color: parameter.wordColor || '#333'
				}">
				{{ parameter.content || '欢迎使用商城小程序，祝你生活愉快' }}
			</view>
			<template v-else>
				<view v-for="(item, index) in contList" :key="index"
					:class="['marquee_text', current || current == 0 ? 'more_cont' : '', current === index ? 'current_cont' : '']"
					:style="{
						'animation-duration': (parameter.duration || 8) + 's',
						color: parameter.wordColor
					}">
					{{ item }}
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		configMixin
	} from './configMixin.js';
	export default {
		mixins: [configMixin],

		data() {
			return {
				current: null,
				contList: [],
				slideType: 1, // 1：上下滚 2：左右
			};
		},
		watch: {
			templateItem: {
				handler(item) {
					if (item.code) {
						this.parameter = item.parameter
						if (!item.parameter.content) {
							// 没有自定义内容，就加载公告
							this.getDataList();
						} else {
							this.showContent();
						}
					}
				},
				immediate: true
			}
		},
		methods: {
			getDataList() {
				this.$resPost('GetInfotainmentList', {
					type: 1,
					page_size: 3
				}).then(({
					data
				}) => {
					if (this.parameter.slideType == 2) {
						/*左右滚动*/
						let str = ''
						data.forEach((item, index) => {
							str += (index == 0 ? '' : ' ') + item.name
						})
						this.parameter.content = str
					} else {
						this.contList = data.map((item) => {
							return item.name
						})
					}
					this.current = 0;
					this.startRun();
				});
			},
			showContent() {
				let arr = this.parameter.content.split('\n');
				this.current = 0;
				this.contList = arr;
				this.startRun();
			},
			open() {
				this.$linkTo('/package/notice/index');
			},
			startRun() {
				if (this._isDestroyed) {
					// 当前组件已销毁
					clearTimeout(this.time);
					return;
				}
				if (this.parameter.slideType == 2) {
					// 左右滚动就不执行
					return;
				}
				if (this.contList.length <= 1) {
					// 上下滚动但是只有一条数据也不上下循环
					this.current = null;
					return;
				}
				this.time = setTimeout(() => {
					let allLength = this.contList.length;
					if (this.current < allLength - 1) {
						this.current = this.current + 1;
					} else {
						this.current = 0;
					}
					this.startRun();
				}, (this.parameter.duration || 8) * 1000);
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 左右滚动跑马灯动画*/
	@keyframes marqueeTransform {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.horseLamp {
		padding: 0 10px;
		display: flex;
		align-items: center;
		overflow-y: auto;
		border-radius: 4px;
	}

	.icon {
		margin-right: 10rpx;
		height: 15px;

		.img {
			height: 100%;
		}
	}

	.horseLamp .static {
		flex: 1;
		overflow: hidden;
		position: relative;
		height: 28px;
		line-height: 28px;
	}

	.horseLamp .static .marquee_text {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		white-space: pre;
		font-family: PingFang SC;
	}

	.horseLamp .static .marquee_text.one_cont {
		padding-left: 100%;
		display: inline-block;
		animation: marqueeTransform linear infinite;
	}

	.horseLamp .static .marquee_text.more_cont {
		position: absolute;
		min-width: 100%;
		top: 0;
		left: 0;
		transform: translateY(100%);
		display: flex;
		align-items: center;
	}

	.horseLamp .static .marquee_text.more_cont .time {
		color: #5a68fd;
		margin-right: 2px;
	}

	.horseLamp .static .marquee_text.more_cont .money {
		font-size: 14px;
		color: #f05b29;
	}

	.horseLamp .static .marquee_text.more_cont.current_cont {
		animation: more_move linear infinite;
	}

	@keyframes more_move {
		0% {
			transform: translateY(100%);
		}

		30% {
			transform: translateY(0);
		}

		70% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	/* 跑马灯 结束*/
</style>
